<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 部门管理 </el-breadcrumb-item>
                <el-breadcrumb-item>部门添加</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="职位名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                    <el-form-item label="级别" prop="level">
                        <el-radio-group v-model="form.level" @change="judgeNeedDept">
                            <el-radio-button :key="index" v-for="(item, index) in levels" :label="item.code">{{
                                item.name
                            }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="部门选择" prop="did" :hidden="needDept">
                        <el-select v-model="form.did" placeholder="请选择" @change="getLeader">
                            <el-option :key="11" label="暂无部门" value="00"></el-option>
                            <el-option :key="index" v-for="(item, index) in depts" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="上级选择" prop="leaderId" :hidden="needLeader">
                        <el-select v-model="form.leaderId" placeholder="请选择">
                            <el-option :key="99" label="暂无职位" value="00"></el-option>
                            <el-option :key="index" v-for="(item, index) in leaders" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态" prop="status">
                        <el-switch v-model="form.status" :active-value="'01'" :inactive-value="'00'"></el-switch>
                    </el-form-item>

                    <el-form-item label="职位描述" prop="description">
                        <el-input type="textarea" rows="5" v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                        <el-button type="primary" @click="onSubmit('form')" icon="el-icon-edit">更新职位</el-button>
                        <el-button type="warning" @click="reset('form')" icon="el-icon-refresh-right">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            id: this.$route.query.id,
            needDept: false,
            needLeader: false,
            position: {},
            leaders: [],
            depts: [],
            condition: {
                did: '',
                level: '',
                status: '01'
            },
            levels: [
                { name: '董事长', code: '01' },
                { name: '副董事长', code: '02' },
                { name: '经理', code: '03' },
                { name: '组长', code: '04' },
                { name: '员工', code: '05' }
            ],
            form: {
                id: '',
                name: '',
                leaderId: '',
                did: '',
                level: '05',
                status: '01',
                description: ''
            },
            rules: {
                name: [
                    { required: true, message: '请部门名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                did: [{ required: true, message: '请选择该职位部门', trigger: 'blur' }],
                leaderId: [{ required: true, message: '请选择该职位情况', trigger: 'blur' }]
            }
        };
    },
    created: function () {
        this.getPosition();
        this.getDepts();
    },
    methods: {
        //判断是否显示部门一栏
        judgeNeedDept(val) {
            if (val == '01' || val == '02') {
                this.needDept = true;
                this.form.did = '01';
            } else {
                this.needDept = false;
                this.form.did = '';
            }
            this.judgeNeedLeader(val);
            if (val == '02' || val == '03') {
                this.getLeader('');
            }
        },

        //判断是否显示上级一栏
        judgeNeedLeader(val) {
            if (val == '01') {
                this.needLeader = true;
                this.form.leaderId = '01';
            } else {
                this.needLeader = false;
                this.form.leaderId = '';
            }
        },

        async getDepts() {
            var d = await this.$http.get('/depts');
            if ((d.code = 200)) {
                this.depts = d.data;
            } else {
                this.$message.error(d.message);
            }
        },

        async getLeader(val) {
            var l = this.form.level;
            this.condition.level = '0' + (l - 1);
            if (this.form.level == '02' || this.form.level == '03') {
                this.condition.did = '';
            } else {
                this.condition.did = this.form.did;
            }
            var d = await this.$http.post('/positionMap', this.condition);
            if (d.code == 200) {
                this.leaders = d.data;
            } else {
                this.$message.error(d.message);
            }
        },

        //获取当前职位
        async getPosition() {
            var d = await this.$http.get('/position/' + this.id);
            if (d.code == 200) {
                this.position = d.data;
                this.init();
                if(this.position!=null){
                    this.getLeader();   
                }
            } else {
                this.$message.error(d.message);
            }
        },

        // 初始化
        init() {
            this.form.name = this.position.name;
            this.form.level = this.position.level;
            this.judgeNeedDept(this.position.level);
            this.form.did = this.position.did;
            this.form.leaderId = this.position.leaderId;
            this.form.status = this.position.status;
            this.form.description = this.position.description;
        },

        // 修改
        onSubmit(formName) {
            this.form.id = this.id;
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    var d = await this.$http.put('/position', this.form);
                    if (d.code == 200) {
                        this.$message.success(d.message);

                    } else {
                        this.$message.error(d.message);
                    }
                } else {
                    this.$message.warning('请把内容填写完整!');
                }
            });
        },

        goback(){
            this.$router.go(-1);
        },

        reset(formName) {
            this.$confirm('此操作将重置所有信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.judgeNeedDept(this.position.level);
                    this.init();
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
        }
    }
};
</script>